@extends('layouts.header')
@section('title','试验条件')
@section('content')
    <article class="page-container">
        <form class="form form-horizontal" id="form" autocomplete="off" >
            <div class="row cl">
                <label class="form-label col-sm-3">样品类型：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->toolname }}</label>
                <input type="hidden" name="tool_id" value="{{ $data_rel->tool_id }}">
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">检验标准：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->num }}</label>
                <input type="hidden" name="std_id" value="{{ $data_rel->std_id }}">
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">检验项目：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->itemname }}</label>
                <input type="hidden" name="item_id" value="{{ $data_rel->testitem_id }}">
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">条件标题：</label>
                <div class="formControls col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="key" autofocus>
                    <b class="c-red">这里标题要与试验数据一致，否则无法判定结果</b>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">单位：</label>
                <div class="formControls col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="unit">
                    <b class="c-red">这里标题要与试验数据一致，否则无法判定结果的准确性</b>
                </div>
            </div>
            @csrf
            <div class="row cl">
                <div class="col-sm-9 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
        <form id="form-table" autocomplete="off">
            <div class="mt-10">
                <select class="select2 col-sm-3" name="excel_pos_id" id="excel_pos_id">
                    @foreach($excel_pos as $pos)
                    <option value="{{$pos->id}}" @if($pos->is_default == 1) selected @endif >{{$pos->name}}</option>
                    @endforeach
                </select>
                <span class="btn btn-primary radius f-r mr-15" id="save_tb"> 保存表格 </span>
            </div>
            <div class="mt-10">
                <table class="table table-border table-bordered table-hover table-bg table-responsive table-condensed">
                    <thead>
                        <tr class="text-c">
                            <th>ID</th>
                            <th>条件标题</th>
                            <th>单位</th>
                            <th width="60px">开始列</th>
                            <th width="60px">结束列</th>
                            <th width="60px">排序</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        @foreach ($data as $val)
                            <tr class="text-c" id="tr_{{$val->id}}">
                                <td>{{ $val->id }}</td>
                                <td class="key"><input type="text" name="data[{{ $val->id }}][key]" class="input-text" style="text-align:center" value="{{ $val->key }}"></td>
                                <td class="unit"><input type="text" name="data[{{ $val->id }}][unit]" class="input-text" style="text-align:center" value="{{ $val->unit }}"></td>
                                <td class="pos_start"><input type="text" name="data[{{ $val->id }}][pos_start]" class="input-text" style="text-align:center" value="{{ $val->pos_start }}"></td>
                                <td class="pos_end"><input type="text" name="data[{{ $val->id }}][pos_end]" class="input-text" style="text-align:center" value="{{ $val->pos_end }}"></td>
                                <td><input type="text" name="data[{{ $val->id }}][sort]" class="input-text" style="text-align:center" value="{{ $val->sort }}"></td>
                                <td>
                                    <a class="btn btn-primary-outline radius size-MINI" onclick="rel_xxx('关联值','/{{config('constant.name_admin')}}/condition/conditionVal',{{ $val->id }},'','')">关联值</a>
                                    <a href="javascript:;" onclick="del(this,{{ $val->id }})" class="ml-5 btn btn-danger-outline radius size-MINI" >删除</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    @csrf
                </table>
            </div>
        </form>
    </article>

    <script type="text/javascript">
        $(function(){
            
            var index2;

            $('.select2').select2();

            $("#form").validate({
                rules:{
                   key:{
                        required:true,
                        notSpace:true,
                    },
                    unit:{
                        notSpace:true,
                    },
                },
                // onkeyup:false,
                // focusCleanup:false,
                success:"valid",
                submitHandler:function(form){
                   $(form).ajaxSubmit({ 
                        type: 'post', 
                        url: "",//自己提交给自己可以不写url   
                        //beforeSend  beforeSubmit
                        
                        beforeSend : function () { 
                            //0.4透明度 白色遮罩
                           index2 = layer.load(2,{ shade: [0.3,'#fff'] }); 
                        },
                        complete : function () { 
                            layer.close(index2); 
                        },
                        success: function(data) {
                            //判断添加结果 
                            if(data === '1'){ 
                                window.location.reload();//刷新
                                parent.layer.msg('添加成功!',{ icon: 1, time:2000 });
                            }else if(data === '2'){ 
                                layer.msg('已存在相同的记录!',{ icon: 2, time:5000 });
                            }
                            else{
                                layer.msg('操作失败!', { icon: 2, time: 2000 }); 
                            } 
                        }, 
                        error: function(data) {
                            console.log(data);
                            ajax_error(data);
                        }///error---end
                    }); 
                }
            });
        });

        /*删除*/
        function del(obj,id){
            var index2;

            layer.confirm('确认要删除吗？',function(index){
                $.ajax({
                    type: 'GET',
                    url: '/{{config('constant.name_admin')}}/conditionKey/del' + '?id=' + id,
                    // dataType: 'json',
                    success: function(data){
                        // console.log(data);
                        if(data === '1'){
                            $(obj).parents("tr").remove();
                            layer.msg('删除成功!',{icon:1,time:2000});
                        }else{
                            layer.msg('删除失败!',{icon:2,time:2000});
                        }
                    },
                    error:function(data) {
                        ajax_error(data);
                    },
                    beforeSend : function () { 
                        //0.4透明度 白色遮罩
                        index2 = layer.load(2,{ shade: [0.05,'#000'] }); 
                    },
                    complete : function () { 
                        layer.close(index2); 
                    },
                });		
            });
        }

        /*关联xxx*/
        function rel_xxx(title,url,id,w,h){
            layer_show(title,url + '?id=' + id,w,h);
        }

        $('#save_tb').on('click',function(){
            ajax('post','saveSortConditionKey',$('#form-table').serialize());
        })

        $('#excel_pos_id').on('change',function(){
            let params = {excel_pos_id:$(this).val(),type:'condition'};
            ajax('get','/{{config('constant.name_admin')}}/excelPos/getTemplPos',params,getTemplPosBak,0);
            function getTemplPosBak(res) {
                if (res.length == 0) {
                    layer.msg('该模板暂无数据！以下为默认数据！');
                    return false;
                }
                for (var i = 0; i < res.length; i++) {
                    let item = res[i],
                        rel_id = item.condition_key_id;
                    $('#tr_'+rel_id).find('td.pos_start').find('input').val(item.pos_start);
                    $('#tr_'+rel_id).find('td.pos_end').find('input').val(item.pos_end);
                }
            }
        })
    </script>
@endsection